<template>
  <div class="task-info">
    <div v-if="localTask" class="task-title">{{ localTask.title }}</div>
    <div v-else>任务详情不可用</div>
    
    <el-table v-if="localTask" :data="[localTask]" :show-header="false" border>
      <el-table-column prop="description" label="任务详情">
        <template #default>
          <div class="table-item">
            <span class="label">任务详情：</span>
            <el-input
              type="textarea"
              v-model="localTask.details.description"
              :rows="3"
              readonly
            />
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="startTime" label="开始时间">
        <template #default>
          <div class="table-item">
            <span class="label">开始时间：</span>
            <el-date-picker
              v-model="localTask.details.startTime"
              type="datetime"
              readonly
              disabled
            />
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="endTime" label="结束时间">
        <template #default>
          <div class="table-item">
            <span class="label">结束时间：</span>
            <el-date-picker
              v-model="localTask.details.endTime"
              type="datetime"
              readonly
              disabled
            />
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="rating" label="任务评分">
        <template #default>
          <div class="table-item">
            <span class="label">任务评分：</span>
            <el-rate
              v-model="localTask.rating"
              disabled
              show-score
              text-color="#ff9900"
            />
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="comments" label="完成情况描述">
        <template #default>
          <div class="table-item">
            <span class="label">完成情况描述：</span>
            <el-input
              type="textarea"
              v-model="localTask.details.comments"
              :rows="3"
              readonly
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn, ElInput, ElDatePicker, ElRate } from 'element-plus';

export default {
  name: "TaskInfo",
  components: {
    ElTable,
    ElTableColumn,
    ElInput,
    ElDatePicker,
    ElRate
  },
  props: {
    task: {
      type: Object,
      default: () => ({
        title: "任务",
            status: "未开始",
            rating: 3,
            details: {
              description: "这是任务1的详细描述",
              startTime: "2023-10-01 09:00",
              endTime: "2023-10-01 18:00",
              comments: "任务1的完成情况描述"
            }
      })
    }
  },
  data() {
    return {
      localTask: null
    };
  },
  watch: {
    task: {
      immediate: true,
      handler(newTask) {
        // 创建 task 的深拷贝
        this.localTask = {
          title: newTask.title,
          rating: newTask.rating,
          details: {
            description: newTask.details?.description || '',
            startTime: newTask.details?.startTime || '',
            endTime: newTask.details?.endTime || '',
            comments: newTask.details?.comments || ''
            }
        };
      }
    }
  }
};
</script>

<style scoped>
.task-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.task-title {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
  color: white;
  background-color: #409EFF;
  text-align: center;
}

.table-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
}

.label {
  min-width: 100px;
  text-align: left;
  color: #606266;
}

:deep(.el-table) {
  --el-table-border-color: #EBEEF5;
}

:deep(.el-table__row) {
  background-color: white;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__wrapper) {
  box-shadow: none;
}

:deep(.el-textarea__inner),
:deep(.el-input__inner) {
  border: none;
  background-color: transparent;
}

:deep(.el-date-editor.el-input) {
  width: auto;
}

:deep(.el-rate) {
  margin-top: 4px;
}
</style>